<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>


    <!--bootstrap3-->
    <link rel="stylesheet" href="/css/bootstrap.min.css">
    <link rel="stylesheet" href="/plugins/bootstraptable/bootstrap-table.min.css">
    <link rel="stylesheet" href="/css/style.css">
<!--    <link rel="stylesheet" href="/css/message.css">-->


</head>
<body>
<div class="panel panel-primary">
    <div class="panel-heading">
        <h3 class="panel-title">学生信息</h3>
    </div>
    <div class="panel-body">
        <div style="display:inline-block;">

            <div style="float:left;padding:6px;">
                <span>姓名：</span>
            </div>
            <div style="float:left;">
                <input id="searchName" class="form-control" style="width:200px;" placeholder="请输入姓名" />
            </div>
            <div style="float:left;padding:6px;">
                <span>性别：</span>
            </div>
            <div style="float:left;">
                <select id="gender" class="form-control" style="width:87px;">
                    <option value="">请选择</option>
                    <option value="男">男</option>
                    <option value="女">女</option>
                </select>
            </div>
            <div style="float:left;margin-left:20px;">
                <button id="query" class="btn btn-primary" onclick="search();">
                        <span class="glyphicon glyphicon-search">
		                </span> 查询
                </button>
                <button id="refresh" class="btn btn-default" onclick="resetList();">
                        <span class="glyphicon glyphicon-refresh">
		                </span> 刷新
                </button>
                <!-- Button trigger modal -->
                <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal" onclick="preAdd();">
                        <span class="glyphicon glyphicon-plus">
                        </span>新增
                </button>
                <button type="button" class="btn btn-danger"   onclick="batchDelete();">
                        <span class="glyphicon glyphicon-trash">
                        </span>批量删除
                </button>
                <button type="button" id="upload" class="btn btn-info move">
                    批量导入
                </button>
                <button type="button"  class="btn btn-warning" onclick="exportStudent();">
                    导出
                </button>

            </div>
        </div>
    </div>
</div>
  <div class="box1">
      <table class="table table-bordered table-striped modalandview" id="stuTable"></table>
  </div>


<!--批量导入模态框-->
  <!--批量导入操作-->
  <!-- 模态框（Modal） -->

  <div class="modal fade" id="Modal" tabindex="-1" role="dialog" aria-labelledby="ModalLabel" aria-hidden="true">
      <div class="modal-dialog">
          <div class="modal-content">
              <div class="modal-header">
                  <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                  <h4 class="modal-title" id="ModalLabel">文件上传</h4>
              </div>
              <div class="modal-body">
                  <input id="f_upload" type="file"  name="file"/>
              </div>

          </div>
      </div>
  </div>


  <!-- 学生Modal -->
  <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
      <div class="modal-dialog" role="document">
          <div class="modal-content">
              <div class="modal-header">
                  <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                  <h4 class="modal-title" id="myModalLabel">学生信息</h4>
              </div>
              <div class="modal-body">
                  <form id="formStudent">
                      <input hidden="hidden" id="id" name="id">
                      <div class="form-group">
                          <label for="sno">学号</label>
                          <input type="text" class="form-control" id="sno" aria-describedby="emailHelp" placeholder="Enter sno" name="sno">
                      </div>
                      <div class="form-group">
                          <label for="sname">姓名</label>
                          <input type="text" class="form-control" id="sname" aria-describedby="emailHelp" placeholder="Enter sname" name="sname">
                      </div>

                      <div class="form-group">
                          <label for="sex">性别</label>
                          <select class="form-control" id="sex" name="sex">
                              <option value="男">男</option>
                              <option value="女">女</option>
                          </select>
                      </div>

                      <div class="form-group">
                          <label for="sage">年龄</label>
                          <input type="text" class="form-control" id="sage" aria-describedby="emailHelp" placeholder="Enter sage" name="sage">
                      </div>

                      <div class="form-group">
                          <label for="password">密码</label>
                          <input type="text" class="form-control" id="password" aria-describedby="emailHelp" placeholder="Enter password" name="password">
                      </div>

                      <div class="form-group">
                          <label for="classid">班级号</label>
                          <input type="text" class="form-control" id="classid" aria-describedby="emailHelp" placeholder="Enter classid" name="classid">
                      </div>

                      <div class="form-group">
                          <label for="gradeid">年级号</label>
                          <input type="text" class="form-control" id="gradeid" aria-describedby="emailHelp" placeholder="Enter gradeid" name="gradeid">
                      </div>

                      <div class="form-group">
                          <label for="mid">专业编号</label>
                          <input type="text" class="form-control" id="mid" aria-describedby="emailHelp" placeholder="Enter mid" name="mid">
                      </div>

                  </form>
              </div>
              <div class="modal-footer">
                  <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                  <button type="button" class="btn btn-primary" onclick="saveStudent();">
                      <span class="glyphicon glyphicon-floppy-save"></span>
                      保存
                  </button>
              </div>
          </div>
      </div>
  </div>




  <script src="/js/jquery-3.4.1.min.js"></script>
  <script src="/plugins/bootstraptable/bootstrap-table.min.js"></script>
  <script src="/js/bootstrap.min.js"></script>
  <script src="/plugins/bootstraptable/locale/bootstrap-table-zh-CN.min.js"></script>
  <script src="/js/upload.js"></script>
  <script src="/js/fileinput.min.js"></script>
<!--  <script src="/js/message.js"></script>-->
  <script src="/js/msg.js"></script>
  <script>

      /**
       * 显示学生列表
       */
      function loadTable(){
          $("#stuTable").bootstrapTable({
              url: '/webapi/student/getbypage1',
              striped:true, //设置为ture有隔行变色效果
              pagination:true,//设置为true会在底部显示分页条
              singleSelect: false,//设置为true将禁止多选
              pageSize:8,   //设置分页的每页条数
              pageList:[8],
              maintainSelected :true, //3,开启分页保持选择状态，就是用户点击下一页再次返回上一页,如果是客户端分页，这个设为true翻页后已经选中的复选框不会丢失
              pageNumber:1, //设置了分页，首页页码
              uniqueId : "id", //每一行的唯一标识，一般为主键列
              clickToSelect: true,
              sidePagination: "server", //设置在哪里进行分页，可选值为"client"或者
              queryParams:function (params){
                  let paraObj = {
                      size: params.limit,
                      page: params.offset/params.limit,
                      sort: "id",
                      direct: "asc",
                      sname:$("#searchName").val(),
                      sex: $("#gender").val()
                  };
                  return paraObj;
              },
              /**
               * onClickCell: 单击单元格触发
               * field    点击单元格的字段名称
               * value    点击单元格的数据值
               * row      点击列的整行数据
               * $element 当前点击td的Dom元素
               */
              onClickCell:function (field,value,row,$element){
                  $element.attr('contenteditable', true);
                  //元素失去焦点事件
                  $element.blur(function() {
                      //单元格修改后的的值
                      let tdValue = $element.html();
                      let index = $element.parent().data('index');

                      //updateCell更新某单元格数据
                      $("#stuTable").bootstrapTable('updateCell', {
                          index: index,       //行索引
                          field: field,       //列名
                          value: tdValue        //cell值
                      })

                      $.ajax ({

                          url:"/webapi/student/update",
                          method:"put",
                          data: row

                      }).done(function (rs) {
                          console.log(rs)
                          if (rs.code === 200){
                              $('#stuTable').bootstrapTable('destroy');
                              loadTable();
                              message.showText("success","更新成功")
                          }
                      });
                      console.log(field);
                      console.log(tdValue);
                      console.log(row);
                  })
              },
              onLoadError:function (rs){
                  console.log(rs)
                  if (rs.code === 403){
                      window.location.href = "../../templates/login/user.html"
                  }
              },
              responseHandler:function (res){
                  console.log(res.data)
                  return {
                      "total": res.data.total, // 总页数
                      "rows": res.data.rows    // 数据
                  }
              },
              columns:[{
                  checkbox: true, // 显示复选框
                  formatter:function (i,row) {  //每次加载checkbox时判断当前row的id是否已经存在全局Set()里
                      if($.inArray(row.id,overAllIds) !== -1)  { //判断数组里有没有这个id
                          return{
                              checked: true     //存在则选中
                          }
                      }else{
                          return {
                              checked: false
                          }
                      }
                  }
              },{
                  rememberSelected: true,
                  field: "id",
                  title: "序号"
              },{
                  rememberSelected: true,
                  field: "sno",
                  title: "学号"
              },{
                  rememberSelected: true,
                  field: "sname",
                  title: "姓名"
              },{
                  rememberSelected: true,
                  field: "sex",
                  title: "性别"
              },{
                  rememberSelected: true,
                  field: "sage",
                  title: "年龄"
              },{
                  rememberSelected: true,
                  field: "classid",
                  title: "班级号"
              },{
                  rememberSelected: true,
                  field: "gradeid",
                  title: "年级号"
              },{
                  rememberSelected: true,
                  field: "mid",
                  title: "专业编号"
              },{
                  field: "id",
                  title: '操作',
                  align: 'center',
                  formatter: function(value,row,index){
                      // let e = "<a href='#' style='text-decoration: none;color: #0c4128' onclick='editStudent("+row.id+");'>编辑</a> "
                      // let d = "<a href='#' style='text-decoration: none;color: #0c4128' onclick='deleteStudent("+row.id+")'>删除</a>"
                      let e = "<button  class='btn btn-primary btn-xs' style='width: 60px;height: 30px' onclick='editStudent("+row.id+");'>" +
                          "<span class='glyphicon glyphicon-edit'></span>编辑</button> "
                      let d = "<button  class='btn btn-danger btn-xs' style='width: 60px;height: 30px' onclick='deleteStudent("+row.id+")'>" +
                          "<span class='glyphicon glyphicon-trash'></span>删除</button>"

                      let c = "<button  class='btn btn-success btn-xs' style='width: 60px;height: 30px; margin-left: 5px' onclick='resetPass("+row.id+")'>" +
                          "重置密码</button>"
                      return e + d + c;
                  },width:250 //自定义修改，增加修改、删除标志
              }],
              formatNoMatches: function (){
                  return "没有相关的匹配结果";
              },
              formatLoadingMessage:function (){
                  return "请稍等，正在加载中...";
              }
          });

          // 点击时获取选中的行或取消选中的行，保存到全局 Array 里
          $('#stuTable').on('uncheck.bs.table check.bs.table check-all.bs.table uncheck-all.bs.table',function(e,rows){
              let datas = $.isArray(rows) ? rows : [rows];
              saveCheckState(e.type,datas);
          });


      }


      //定义全局的存储数组，用于存储复选框的标识
      let overAllIds = [];

      function saveCheckState(type, datas){
          if(type.indexOf('uncheck')===-1){
              $.each(datas,function(i,v){
                  // 添加时，判断一行或多行的 id 是否已经在数组里 不存则添加
                  overAllIds.indexOf(v.id) === -1 ? overAllIds.push(v.id) : -1;
              });
          }else{
              $.each(datas,function(i,v){
                  overAllIds.splice(overAllIds.indexOf(v.id),1);    //删除取消选中行
              });
          }

          // console.log(overAllIds);
      }



      function exportStudent(){
          // $.ajax({
          //     url:"/webapi/export/student",
          //     method: "get"
          // }).done(function (rs){
          //     message.showText("success","导出成功")
          // })
          let form = $("<form>");
          form.attr("style","display:none");
          form.attr("target","");
          form.attr("method","get");
          form.attr("action","/webapi/export/student");
          $("body").append(form);
          form.submit();
          form.remove();
          // window.location.href = "/webapi/export/student";
          message.showText("success","导出成功");
      }

      /**
       * 批量删除
       */
      function batchDelete(){
          // boostrap table 中复选框选中后，翻页操作会导致上一页选中的丢失，api中的 bootstrapTable(‘getSelections’);
          // 只能拿到当前页的复选框,而现在希望翻页之后再回到当前页的时候被勾选的复选框不会丢失
          // let rows = $("#stuTable").bootstrapTable("getSelections");
          let len = overAllIds.length;
          if(len === 0){
              message.showText("error","请选择要删除的行")
          }else{
              if(confirm("你确定删除"+len+"条内容吗？")){
                  let arr = [];
                  for (let i = 0;i < len;i++){
                      arr.push(overAllIds[i]);
                  }
                  $.ajax({
                      url: '/webapi/student/batchdelete/'+arr,
                      method: 'delete'
                  }).done(function (rs){
                      if (rs.code === 200){
                          $("#stuTable").bootstrapTable("destroy");
                          loadTable();
                          message.showText("success","删除成功")
                      }

                  })
              };


          }

      }

      /**
       * 重置密码
       * @param id
       */
      function resetPass(id){
          if (confirm("您确定重置该学生的密码吗？")){
              $.ajax({
                  url: "/webapi/student/resetpass/" + id,
                  method: "post"
              }).done(function (rs){
                  if (rs.code === 200){
                      message.showText("success",rs.msg);
                  }

              })
          }
      }

      /**
       * 删除学生
       */
      function deleteStudent(id){
          if(confirm("您是否真的要删除该记录?")){
              $.ajax({
                  url: '/webapi/student/delete/'+id,
                  method: 'delete'
              }).done(function (rs){
                  if (rs.code == 200){
                      $("#stuTable").bootstrapTable("destroy");
                      loadTable();
                      message.showText("success","删除成功")
                  }

              })
          }

      }

      /**
       * 点击新增时给id赋值，以便判断做新增操作
       */
      function preAdd(){
          $("#id").val(0);
          $("#sno").val("");
          $("#sname").val("");
          $("#sex").val("");
          $("#sage").val("");
          $("#password").val("");
          $("#classid").val("");
          $("#gradeid").val("");
          $("#mid").val("");
      }

      // 修改之前获取学生信息
      function editStudent(id){
          $('#myModal').modal('show')
          $.ajax({
              url:'/webapi/student/get/'+id
          }).done(function (rs){
              console.log(rs)
              if (rs.code == 200){
                  let data = rs.data
                  $("#id").val(data.id);
                  $("#sno").val(data.sno);
                  $("#sname").val(data.sname);
                  $("#sex").val(data.sex);
                  $("#sage").val(data.sage);
                  $("#password").val("");
                  $("#classid").val(data.classid);
                  $("#gradeid").val(data.gradeid);
                  $("#mid").val(data.mid);
              }
          })
      }

      /**
       * 根据id判断是新增还是更新，判断之后做新增和更新操作
       */
      function saveStudent(){
          let data = $("#formStudent").serialize();
          let id = $("#id").val();
          if (id < 1){
              //是新增
              $.ajax ({
                  url:"/webapi/student/insert",
                  method:"post",
                  data:data
              }).done(function (rs) {
                  console.log(rs)
                  if (rs.code == 200){
                      $('#stuTable').bootstrapTable('destroy');
                      loadTable();
                      $('#myModal').modal('hide');
                      message.showText("success","添加成功")
                  }

              });
          } else {

              //是更新
              $.ajax ({

                  url:"/webapi/student/update",
                  method:"put",
                  data:data

              }).done(function (rs) {
                  if (rs.code == 200){
                      $('#stuTable').bootstrapTable('destroy');
                      loadTable();
                      $('#myModal').modal('hide');
                      message.showText("success","更新成功")
                  }
              });
          }
      }

      /**
       * 刷新数据
       */
      function resetList(){
          $("#searchName").val("");
          $("#gender").val("");
          $('#stuTable').bootstrapTable("destroy");
          loadTable();
          message.showText("success","刷新成功")
      }
      function search(){
          $("#stuTable").bootstrapTable("destroy");
          loadTable();
      }

      $(function (){
          loadTable();
          message.showText("success","获取成功");
      })

      // 引用后需要初始化，解决IE8以上浏览器不支持JS的h5新属性classList
      // $(function(){
      //     message.classList()
      // })



  </script>

</body>
</html>